<template>
  <div class="product container-fluid mt-5">
    <div class="container-xxl px-0 mx-0 d-flex justify-content-center flex-column mx-auto">
      <h2 class="d-none d-md-block pt-4 px-md-3"><strong>热卖中</strong></h2>
      <div class="row d-flex justify-content-center flex-column">
        <div id="cd" class="cd d-flex justify-content-between flex-wrap">
          <card class="card col-6 my-2 col-md-4 border-0" v-for="i in lists" :key="i"></card>
        </div>
        <p class="text-center my-2">
          <small>{{ text }}</small>
        </p>
      </div>
    </div>
    </div>
</template>

<script>
import card from '../../components/card/card.vue'
export default {
  name: "product",
  data() {
    return {
      lists: Array(12),
      text: '加载中'
    };
  },
  created() {
    
  },
  methods: {

  },
  components: {
    card
  },
  async mounted(){
    const cd = document.getElementById('cd') 
    const card = document.getElementsByClassName('card') 
    window.addEventListener('scroll', e => {
      let cardh = card[0]?.scrollHeight
      let cdh = cd?.scrollHeight
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      if(this.lists.length <= 30){
        if(top + 2 * cardh >= cdh){
          Promise.resolve().then(() => {
            this.lists=[...this.lists, ...Array(6)];
            console.log('resolve');
          })
        }
      }else{
        this.text = '尽情期待~'
      }

    })
    
  }
};
</script>
<style scoped>

</style>